<template>
  <a-modal :title="'上传文件'" :visible="true" width="60%" :footer="null" @cancel="reset">
    <a-card>
      <!-- <JImageUpload style="display:flex;flex-wrap: wrap;width:100%" :uploadParams="getUploadParams()" :isMultiple="true" :number="5" @fileChange="fileChange" v-model="photoList"></JImageUpload>  -->
      <a-row>
        <a-spin :spinning="spinning">
          <a-form :form="form" @submit="handleSubmit" :labelCol="formItemLayout.labelCol"
          :wrapperCol="formItemLayout.wrapperCol">
          <div v-for="item, i in menuList" :key="i">
            <a-form-item :label="item.sysDictVo.name" :required="true">
              <a-radio-group @change="e => onChange(e, item)" :v-model="item.value">
                <a-radio-button v-for="subitem, i in item.childrenList" :value="subitem.id" :key="i"
                  style="margin-left:10px;margin-bottom:10px">
                  {{ subitem.name }}
                </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </div>
          <a-form-item label="上传类型" :required="true">
            <a-radio-group v-model="type" @change="changeType">
              <a-radio value="1" style="margin-left:10px; ">
                <span style="margin-left:5px">图片</span>
              </a-radio>
              <a-radio value="2" style="margin-left:10px;">
                <span style="margin-left:5px">压缩包</span>
              </a-radio>
              <a-radio value="3" style="margin-left:10px;">
                <span style="margin-left:5px">视频</span>
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="访问类型" :required="true">
            <a-radio-group v-model="visitStatus">
              <a-radio value="1" style="margin-left:10px; ">
                <span style="margin-left:5px">内网访问</span>
              </a-radio>
              <a-radio value="2" style="margin-left:10px;">
                <span style="margin-left:5px">外网访问</span>
              </a-radio>

            </a-radio-group>
          </a-form-item>
          <a-form-item label="">
            <JImageUpload style="margin-left: 60px;" :uploadParams="getUploadParams()" :isMultiple="true" :listType="listType" :type="type" :number="number"
              @fileChange="fileChange" v-model="photoList"></JImageUpload>
          </a-form-item>
          <a-row>
            <a-col :span="16" :offset="8" class="info-action">
              <a-button type="primary" @click="reset" :disabled="disabled">返回</a-button>
              <a-button type="primary" class="ml-20" html-type="submit" :loading="loading" :disabled="disabled">保存</a-button>
            </a-col>
          </a-row>
        </a-form>
        </a-spin>
      </a-row>

    </a-card>
  </a-modal>
</template>

<script>
import JImageUpload from './image/upload.vue'
import globalData from '@/assets/js/common'
import { axios } from '@/utils/request'
import { postAction, getAction, postFormData } from '@/api/manage'

export default {
  components: {
    JImageUpload
  },

  props: {
    content: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      photoList: [],
      style: '',
      type: '',
      spinning:false,
      disabled :true,
      visitStatus: '',
      newLifePhotos: [],
      fileList: [],
      uploadParams: {},
      isMultiple: true,
      token: '',
      number: 20,
      listType:'picture-card',
      menuList: [],
      loading: false,
      formKeyData: {
        token: '',
        key: ''
      },
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
        },
        wrapperCol: {
          xl: { span: 17 },
        }
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    },
  },
  created() {
    const { content } = this.$props
    this.getUploadParams()
    this.getMenuList()
  },
  methods: {
    getMenuList() {
      this.spinning = true
      try {
        postAction(`/jic-basemgt-center-gallery/sysDict/findSystemDictData`, {}).then(res => {
          if (res.code == 200) {
            this.menuList = res.data
            this.menuList.map((item) => {
              item.value = ''
            })
            this.disabled = false
          } else {
            this.$message.warning(res.msg || res.message)
          }
        })
      } catch (error) {
        this.$message.error('获取菜单失败！')
      } finally {
        this.spinning = false
      }
    },
    changeType(){
      if(this.type == 2){
        this.listType = 'text'
        this.number = 1
      }else{
        this.listType = 'picture-card'
        this.number = 20
      }
      this.newLifePhotos = []
    },
    onChange(e, item) {
      // console.log(e.target.value);
      item.value = e.target.value
      // console.log(this.menuList);
    },
    handleSubmit(e) {
      e.preventDefault()
      const newArr = []
      this.menuList.map((item) => {
        if (!item.value) {
          this.$message.warning('请选择' + item.sysDictVo.name + '!')
          return
        } else {
          newArr.push(item.value)
        }
      })
      this.$nextTick(() => {
        if (!this.type) {
          this.$message.warning('请选择上传类型!')
        } else if (!this.visitStatus) {
          this.$message.warning('请选择访问类型!')
        } else {
          if (newArr.length == this.menuList.length) {
            this.submit()
          }
        }
      })
    },
    submit() {
      const formData = new FormData()
      if (this.type != 2) {
        this.newLifePhotos.forEach((file) => {
          formData.append(`multipartFileList`, file.originFileObj);
        });
      }else{
        this.newLifePhotos.forEach((file) => {
          formData.append(`filePathList`, file.url);
        });
      }
      this.menuList.forEach((item, index) => {
        formData.append(`fileBaseList[${index}].id`, item.value)
      });
      formData.append('type', this.type)
      formData.append('visitStatus', this.visitStatus)
      formData.append('userId', this.userInfo.workNo)
      formData.append('userName', this.userInfo.realname)
      const apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";
      axios({
        url: apiBaseUrl + '/api/gateway/jic-basemgt-center-gallery/fileManager/localFileUpload',
        method: 'post',
        data: formData,
        contentType: false,
        cache: false,
        processData: false,//用于对data参数进行序列化处理 这里必须false
        // headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq' }
      }).then(res => {
        if (res.code == 200) {
          this.$message.success('保存成功')
          this.reset()
        } else {
          this.$message.warning(res.msg || '操作失败')
        }
        this.loading = false
      })
    },
    getUploadParams() {
      this.uploadParams = { ...globalData.uploadParams }
      return { ...globalData.uploadParams }
    },

    fileChange(list) {
      this.newLifePhotos = list
      console.log(this.newLifePhotos)
    },
    reset() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="less">
.button {
  margin-left: 10px;
}

.button::before {
  content: '';
  border: 4px solid green;
  border-radius: 4px;
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
}

.item {
  border: 4px solid green;
  border-radius: 4px;
}

.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}

.ml-20 {
  margin-left: 20px;
}


.ant-upload-picture-card-wrapper {
  width: 20%;
}

.ant-upload-picture-card-wrapper[data-v-7206a2ce] {
  width: 100%;
}

.dynamic-delete-button {
  cursor: pointer;
  font-size: 24px;
  color: #999;
  margin: 50px 5px;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
